<template>
	<view class="EmojiBtn">
		<view class="item" v-for="emojiItem in emojiName" :key="emojiItem" @click="chooseEmoji(emojiItem)"><image :src="emojiUrl + emojiMap[emojiItem]" /></view>
	</view>
</template>

<script>
import { emojiName, emojiMap, emojiUrl } from '@/utils/emojiMap';

export default {
	data() {
		return {
			emojiName: emojiName,
			emojiMap: emojiMap,
			emojiUrl: emojiUrl,
		};
	},
	methods: {
		// 发消息选中emoji
		chooseEmoji(item) {
			this.$emit('handleEvent', 'emoji', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.EmojiBtn {
	width: 100%;
	height: 300rpx;
	background-color: #f3f3f3;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow-y: scroll;
	padding: 15rpx;
	.item {
		height: 90rpx;
		width: 90rpx;
		padding: 16rpx;
		box-sizing: border-box;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
